<template>
	<view class="container">
		<view class="form-item">
			<text>评分：</text>
			<view class="rating-stars">
				<view v-for="star in 5" :key="star" class="star" :class="{ 'filled': buyerRating >= star }"
					@click="setRating(star)">
					★
				</view>
			</view>
		</view>

		<view class="form-item">
			<text>评论内容：</text>
			<textarea v-model="buyerContent" placeholder="请输入评论..." />
		</view>

		<button @click="submitComment">提交评论</button>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		addCommentApi
	} from '@/api/comments.js'



	const buyerId = ref(0)
	const orderId = ref(0)
	const goodsId = ref(0)
	const sellerId = ref(0)
	const buyerContent = ref('')
	const buyerRating = ref(0)
	const sellerContent = ref('')
	const sellerRating = ref(0)


  // 设置评分的函数
  const setRating = (star) => {
    buyerRating.value = star
  }
  
  
	onLoad((options) => {
		// 传递过来是json
		console.log(options)
		const goods = JSON.parse(options.goods)
		// 转换成字符串
		console.log(goods)
		buyerId.value = goods.buyerId
		orderId.value = goods.orderId
		goodsId.value = goods.goodsId
		sellerId.value = goods.userId
		
	})

	  const submitComment = async () => {
	    
	    const commentData = {
	      buyerId: buyerId.value,
	      orderId: orderId.value,
	      goodsId: goodsId.value,
	      sellerId: sellerId.value,
	      buyerContent: buyerContent.value,
	      buyerRating: buyerRating.value,
	      sellerContent: sellerContent.value,
	      sellerRating: sellerRating.value
	    }
		console.log(commentData)
	    // 调用接口提交评论数据
	    const res = await addCommentApi(commentData)
	    if (res && res.code === 200) {
	      uni.showToast({
	        title: '评论成功',
	        icon: 'success'
	      })
	      uni.navigateBack()
	    } else {
	      uni.showToast({
	        title: '评论失败',
	        icon: 'none'
	      })
	    }
	  }
</script>
<style scoped>
  .container {
    padding: 20rpx;
  }

  .form-item {
    margin-bottom: 30rpx;
  }

  .rating-stars {
    display: flex;
    gap: 5rpx;
  }

  .star {
    font-size: 40rpx;
    color: #ddd;
    cursor: pointer;
  }

  .star.filled {
    color: #ff9800;
  }

  textarea {
    width: 100%;
    min-height: 200rpx;
    border: 1px solid #ddd;
    padding: 10rpx;
    border-radius: 8rpx;
  }

  button {
    margin-top: 20rpx;
    padding: 10rpx 20rpx;
    background-color: #ff9800;
    color: white;
    border-radius: 5rpx;
  }
</style>
